<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>

    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<!--引入抽取的topbar-->
<!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="commons/bar::topbar"></div>

<div class="container-fluid">
    <div class="row">
        <!--引入侧边栏-->
        <div th:replace="commons/bar::#sidebar(activeUri='/members')"></div>

        <n role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h3>车款管理：</h3>

            <form id="" method="get" th:action="@{/car/getCars}">
                品牌:
                <select id="carMake" name="makeName">

                    <div th:each="item : ${carMakes}">
                        <option id="carMake3" th:text="${item.name}" th:value="${item.name}"></option>
                    </div>

                </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                类型:
                <select id="level" name="levelName">
                    <div th:each="item:${levelName}">
                        <option th:text="${item}" th:value="${item}"></option>
                    </div>
                </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                车系:
                <select id="carModel" name="modelName">
                    <div th:each="item:${carModels}">
                        <option th:text="${item.name}" th:value="${item.name}"></option>

                    </div>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" name="name" placeholder="名称模糊匹配">
                <input type="submit" value="搜索">
            </form>

            <!--<button type="button" style="float: right" class="button glossy mid-margin-right" onclick="addCar();">-->
            <!--<span class="button-icon"><span class="icon-tick"></span></span> 新增-->
            <!--</button>-->

            <div class="container">
                <!-- 按钮：用于打开模态框 -->
                <button type="button" style="float: right" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal1">
                    新增
                </button>

                <!-- 模态框 -->
                <div class="modal fade" id="myModal1">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title">新增车型</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <form method="post" th:action="@{/car/addCar}">
                                <!--<form id="addCarFormId" method="post" action="">-->
                                <!-- 模态框主体 -->
                                <div class="modal-body">

                                    <div class="form-group">
                                        <label for="" class="col-sm-3 control-label">车型名称：</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="name" value="" id="nameId"
                                                   placeholder="车型名称">
                                        </div>
                                    </div>
                                    <br/>

                                    <label for="" class="col-sm-3 control-label">所属品牌：</label>
                                    <select id="carMake1" name="carMake">
                                        <!--/*@thymesVar id="carMakes" type="com.qf.shopping.pojo.car.CarMake"*/-->
                                        <span th:text="${carMakes}">aaa</span>

                                        <div th:each="item : ${carMakes}">
                                            <option th:value="${item.name}">aaa</option>
                                        </div>
                                    </select><br/>

                                    <label for="" class="col-sm-3 control-label">所属厂商:</label>
                                    <select id="manufacturerId" name="manufacturer">
                                        <option value="宝马">宝马</option>
                                        <option value="奥迪">奥迪</option>
                                    </select><br/>

                                    <label for="" class="col-sm-3 control-label">所属车系:</label>
                                    <select id="carModel1" name="model">
                                        <tr th:each="carVo,carVos:${carVos}">
                                            <option th:value="${carVo.carConstom['modelName']}">奔驰E级</option>
                                    </select><br/>

                                    <label for="" class="col-sm-3 control-label">所属年款:</label>
                                    <select id="year" name="year">
                                        <tr th:each="carVo,carVos:${carVos}">
                                            <option th:value="${carVo.carConstom['year']}">2018</option>
                                    </select><br/>

                                    <label for="" class="col-sm-3 control-label">类型:</label>
                                    <select id="level1" name="level">
                                        <tr th:each="carVo,carVos:${carVos}">
                                            <option th:value="${carVo.carConstom['levelName']}">SUV</option>
                                    </select><br/>

                                </div>

                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>


                </select>
                <div class="table-responsive">

                    <table class="table table-striped table-sm" style="text-align: center">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>车型名称</th>
                            <th>所属品牌</th>
                            <th>所属年款</th>
                            <th>所属车系</th>
                            <th>类型</th>
                            <th>功能</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr th:each="carVo,carVos:${carVos}">
                            <td th:text="${carVos.count}"></td>
                            <td th:text="${carVo.carConstom['id']}" th:hidden="true"></td>
                            <td th:text="${carVo.carConstom['name']}"></td>
                            <td th:text="${carVo.carConstom['makeName']}"></td>
                            <td th:text="${carVo.carConstom['year']}"></td>
                            <td th:text="${carVo.carConstom['modelName']}"></td>
                            <td th:text="${carVo.carConstom['levelName']}"></td>
                            <td>
                                <!--<a class="btn btn-sm btn-primary" href="emp" th:href="@{/parameter/}">配置表</a>-->
                                <input type="hidden" th:value="${carVo.carConstom['id']}"/>
                                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                                        data-target="#myModal2"
                                        onclick="update1(this)">
                                    编辑
                                </button>

                                <a class="btn btn-sm btn-primary" href="emp"
                                   th:href="@{/car/deleteCar/}+${carVo.carConstom['id']}">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                </main>

                <!-- 模态框 -->
                <div class="modal fade" id="myModal2">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title">编辑车型</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <form method="post" th:action="@{/car/updateCar}">

                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    <div class="form-group">

                                        <label for="" class="col-sm-3 control-label">车型名称：</label>
                                        <div class="col-sm-9">
                                            <input id="name" type="text" class="form-control" name="carConstom.name"
                                                   placeholder="车型名称">
                                        </div>
                                    </div>
                                    <br/>
                                    <input type="hidden" id="id" name="carConstom.id"/>

                                    <label for="" class="col-sm-3 control-label">所属品牌：</label>
                                    <select id="carMake2" name="carConstom.makeName">
                                        <div th:each="item : ${carMakes}">
                                            <option th:text="${item.name}" th:value="${item.name}"></option>
                                        </div>
                                    </select><br/>

                                    <label for="" class="col-sm-3 control-label">所属厂商:</label>
                                    <!--<select id="manufacturerId1" name="carConstom.manufacturerId">-->
                                        <!--<option value="宝马">宝马</option>-->
                                        <!--<option value="奥迪">奥迪</option>-->
                                    <!--</select>-->
                                    <br/>
                                    <label for="" class="col-sm-3 control-label">所属车系:</label>

                                    <select id="carModel2" name="carConstom.modelName">
                                        <tr th:each="item:${carModels}">
                                            <option th:text="${item.name}" th:value="${item.name}"></option>
                                    </select><br/>

                                    <label for="" class="col-sm-3 control-label">所属年款:</label>
                                    <select id="year1" name="carConstom.year">
                                        <tr th:each="carVo,carVos:${carVos}">
                                            <option th:text="${carVo.carConstom['year']}"
                                                    th:value="${carVo.carConstom['year']}"></option>
                                    </select><br/>

                                    <label for="" class="col-sm-3 control-label">类型:</label>

                                    <select id="level2" name="carConstom.levelName">
                                        <div th:each="item:${levelName}">
                                            <option th:text="${item}" th:value="${item}"></option>
                                        </div>
                                    </select><br/>


                                </div>

                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>


                <form id="deleteEmpForm" method="post">
                    <input type="hidden" name="_method" value="delete"/>
                </form>
            </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->

</body>

<!--<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>-->
<!--<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>-->
<!--<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>-->
<!--<script type="text/javascript" src="webjars/jquery/3.3.1/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="webjars/bootstrap/4.0.0/js/bootstrap.min.js"></script>-->

<script type="text/javascript" th:inline="javascript">

    /*<![CDATA[*/

    function update1(e) {
        var context = /*[[@{/}]]*/'';
        var id=$(e).prev().val()
        $.get(context+"car/getCar",{id:id},
            function(data){
                $("#name").val(data.carConstom.name);
                $("#carMake2").val(data.carConstom.makeName);
                $("#carModel2").val(data.carConstom.modelName);
                $("#year1").val(data.carConstom.year);
                $("#level").val(data.carConstom.levelName);
                $("#id").val(data.carConstom.id);
            }
        )
    }
    /*]]>*/

    // function query(){
    // // $(document).ready(function () {
    //     var carMakeId = $("#carMake option:selected").val();   //获得选中的值
    //     var levelId = $("#level option:selected").val();   //获得选中的值
    //     var carModelId = $("#carModel option:selected").val();   //获得选中的值
    //
    //     $.ajax({
    //         type:"post",
    //         dataType:"json",
    //         url:context+"/car/getCars",
    //         data:{carMakeId:carMakeId,levelId:levelId,carModelId:carModelId},
    //         // success:function(data){}
    //     })
    // })


</script>

</html>